<template>
  <div>
      <el-divider></el-divider>
      <el-tabs tab-position="left" style="height: 200px;">
        <el-tab-pane label="审批">
            <el-form>
              <el-form-item :label="'第'+i.index+'审'" prop="name" v-for="i in items">
                <template v-if="data.order_id == i.index && (data.check_status==0 || data.check_status==1)">
                  <el-button type="success" size="mini" @click="examine(i.index,1)">同意</el-button>
                  <el-button type="danger"  size="mini" @click="examine(i.index,2)">拒绝</el-button>
                </template>
                <template v-else-if="data.order_id >= i.index">
                  <span size="mini" class="success" v-if="data.check_status== 2 || data.check_status== 1"><i class="el-icon-success" />审核通过</span>
                  <span size="mini" class="danger" v-else-if="data.check_status== 3"><i class="el-icon-success" />已拒绝</span>
                </template>
                <template v-else-if="data.order_id < i.index">
                  请等待上级审核完成
                </template>
              </el-form-item>
            </el-form>


        </el-tab-pane>
        <el-tab-pane label="审批流程">
          <el-steps :active="data.order_id"  direction="vertical"
                    finish-status="success">
            <el-step title="创建人" :description="data.name +'于'+data.created_at+'创建'"></el-step>
            <el-step v-for="i in items"

                     :title="'第'+i.index+'审'"
                     :description="i.user_name">
            </el-step>
          </el-steps>

        </el-tab-pane>
        <el-tab-pane label="审批历史">审批历史</el-tab-pane>
      </el-tabs>


  </div>
</template>

<script>
    import Resource from '@/api/examine';
    const  apiResource = new Resource('examine');
    export default {
        name: "InfoExamine",
        props:['info'],
        data(){
            return {
                items:0,
                data:''
            }
        },
        watch:{
            info:function(){
                this.data=this.info;
                this.setItems();
          }
        },methods:{
           async setItems(){
              const { data } = await apiResource.getUsersByFolwId(this.data.flow_id,this.data.submituser);
                let names='';
                data.map(item=>{
                    if(item.status==1)
                    {
                        names='负责人主管:'
                    }else if(item.status==2)
                    {
                        names='指定用户:'
                    }
                    item.user_name=names+item.user_name.join(',');
                })
                this.items=data;
            },
            async examine(order_id,status){
                let parmars ={"id":this.data.id,"flow_id":this.data.flow_id,"order_id":order_id,"review_type":status,"note":""}
                 await apiResource.review(parmars)
                    .then(response => {
                        this.$message({
                            message: '审核成功.',
                            type: 'success',
                            duration: 5 * 1000,
                        });
                       this.$emit('func',this.data.id);

                    }).catch(error => {
                        console.log(error);
                    });
            }

        },
    }
</script>

<style scoped>
  .success{ color: #13ce66;}
  .danger{ color: #f56c6c;}
</style>
